import React, { useEffect, useState, useImperativeHandle } from 'react';
import { connect } from 'umi';
import { Row, Col, Card, Badge } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import Tree from '../../../TreeList';
const TreeRole = (props) => {
  const { Meta } = Card;
  const { dispatch, refs, type, roleLists } = props;
  const [list, setList] = useState([]);
  const [selectedKeys, setSelectedKeys] = useState([]);
  const [treeList, setTreeList] = useState([]);
  const [selectId, setSelectId] = useState([]);
  useImperativeHandle(refs, () => {
    return {
      onChange: () => {
        return selectId;
      },
    };
  });
  useEffect(() => {
    handleSelectId();
  }, [selectId]);
  useEffect(() => {
    fetchData();
  }, []);
  const fetchData = () => {
    dispatch({
      type: 'system/fetchRoleDetail',
      payload: {
        action: 'insert',
      },
      callback: (e) => {
        const { roleList, accessList = [] } = e;
        setList(roleList);
        setTreeList(accessList);
        if (type === 'update') {
          setSelectId(
            roleLists.map((item) => {
              return item.id;
            }),
          );
        }
      },
    });
  };
  const handleFilterId = (id) => {
    return selectId.reduce((item, val) => {
      if (val === id) {
        return false;
      }
      return item;
    }, true);
  };
  const handleCollect = (id) => {
    if (!handleFilterId(id)) {
      setSelectId(
        selectId.filter((item) => {
          return item !== id;
        }),
      );
    } else {
      setSelectId([...selectId, id]);
    }
  };
  const handleSelectId = (idlist) => {
    let newList = list.reduce((val, item) => {
      let data = null;
      let idArray = idlist || selectId;
      idArray.forEach((value) => {
        if (value === item.id) {
          data = item.accessIdList;
        }
      });
      if (data) {
        return [...val, ...data];
      } else {
        return val;
      }
    }, []);
    newList = Array.from(new Set(newList));
    setSelectedKeys(newList);
  };

  return (
    <Card title={'角色管理'}>
      <Row gutter={[16, 24]}>
        {list.map((item, index) => {
          const { roleName, remark, id } = item;
          return (
            <Col
              onClick={() => {
                handleCollect(id);
              }}
              key={index}
              span={8}
            >
              {handleFilterId(id) ? (
                <Card hoverable>
                  <Meta
                    title={
                      <div>
                        <UserOutlined></UserOutlined>
                        {roleName}
                      </div>
                    }
                    description={remark}
                  />
                </Card>
              ) : (
                <Badge.Ribbon text="选中">
                  <Card
                    onClick={() => {
                      handleCollect(id);
                    }}
                    hoverable
                  >
                    <Meta
                      title={
                        <div>
                          <UserOutlined></UserOutlined>
                          {roleName}
                        </div>
                      }
                      description={remark}
                    />
                  </Card>
                </Badge.Ribbon>
              )}
            </Col>
          );
        })}
        <Col span={24}>
          <Tree
            checkStrictly={true}
            selectedKeys={selectedKeys}
            disabled={true}
            list={treeList}
          ></Tree>
        </Col>
      </Row>
    </Card>
  );
};
 export default connect(({ system, loading }) => ({
  ...system,
  loading: loading.models.system,
}))(TreeRole);
